<script lang="ts" setup>
import { ElButton, ElTableColumn, ElTable } from "element-plus";
import Header from "@/views/content/util/header.vue";
import { onMounted, ref, computed, defineEmits } from "vue";

//组件
import Limit from "@/views/content/util/limit.vue";
import IButton from "@/views/content/util/button/iButton.vue"
import OButton from "@/views/content/util/button/oButton.vue"


const getLimitItemList = (displayedItemList: Array<Object>) => {
  // console.log("接收：")
  // console.log(displayedItemList)
  limitItemList.value = displayedItemList
}

const itemList = ref([]);
const limitItemList = ref([]);
onMounted(async () => {
  // const res = await classify1ListApi(useUserStore().userInfo.id)
  // itemList.value = res.data
  // itemList.value = itemList.value.map(row => {
  //     return {
  //         ...row,
  //         status: row.status === 1 ? true : false
  //     };
  // })
});
</script>

<template>
  <div style="width: 97%;">
    <Header title="商品标签"></Header>
    <div>
      <div>
        <IButton title="添加标签" type="add"></IButton>
        <IButton title="导入标签" type="in"></IButton>
        <IButton title="导出标签" type="out"></IButton>
      </div>
      <div style="margin-top: 20px">
        <el-table :data="limitItemList" :row-key="(row) => row.id"
          :header-cell-style="{background:'rgb(243, 243, 243)',color:'#606266'}"
          >
          <el-table-column type="selection"></el-table-column>
          <el-table-column label="排序" prop="sort" width="100px"></el-table-column>
          <el-table-column label="ID" prop="id"></el-table-column>
          <el-table-column label="标签名称" prop="name"></el-table-column>

          <el-table-column label="启用状态" prop="status">
            <template #default="{ row }">
              <el-switch v-model="row.status" />
            </template>
          </el-table-column>
          <el-table-column label="操作" prop="">
            <template #default="{ row }">
              <div class="button-container">
                <el-tooltip content="编辑" placement="top">
                  <OButton></OButton>

                </el-tooltip>
                <el-tooltip content="删除" placement="top">
                  <OButton type="delete"></OButton>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div>
        <Limit :itemList="itemList" @updateItemList="getLimitItemList" />
      </div>
    </div>
  </div>
</template>
<style scoped>
::v-deep .el-table th>.cell {
  color: black;
}

.caozuo-button {
  width: 30px;
  height: 15px;
  font-size: 10px;
}
</style>
